<template>
  <div id="basic-form-con">
    <g-banner :title="'基础表单'" :des="'最基础的表单页面'"></g-banner>
    <a-affix :target="getScrollingCon">
      <div class="g-title-con">
        <h2 class="g-main-title pull-left">基础表单</h2>
        <div class="g-title-button pull-right">
          <el-button type="primary">保存</el-button>
          <el-button @click="handleSubmit" type="primary">提交</el-button>
          <el-button>返回</el-button>
        </div>
        <div class="clearfix"></div>
      </div>
    </a-affix>
    <div class="g-box">
      <el-form :model="meeting" label-width="120px" class="g-form" :rules="formRules" ref="form">
        <el-form-item label="会议名称" prop="meetingName">
          <el-input v-model="meeting.meetingName" placeholder="请输入会议名称" class="g-input-width-large"></el-input>
        </el-form-item>
        <el-form-item label="会议内容" prop="meetingContent">
          <el-input v-model="meeting.meetingContent" placeholder="请输入会议内容" class="g-input-width-large"></el-input>
        </el-form-item>
        <el-form-item label="起止时间" prop="meetingDuration">
          <el-date-picker v-model="meeting.meetingDuration.meetingStart" type="datetime" placeholder="请输入开始时间" style="width: 170px;"></el-date-picker>
          <span style="margin: 0 10px;">至</span>
          <el-date-picker v-model="meeting.meetingDuration.meetingEnd" type="datetime" placeholder="请输入结束时间" style="width: 170px;"></el-date-picker>
        </el-form-item>
        <el-form-item label="会议地点" prop="meetingSite">
          <el-select v-model="meeting.meetingSite" placeholder="请输入会议地点" class="g-input-width-large">
            <el-option :value="item.value" :label="item.label" v-for="item in meetingSites" :key="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="参会者" prop="meetingParticipant">
          <el-select v-model="meeting.meetingParticipant" placeholder="请选择参会者" class="g-input-width-large" multiple>
            <el-option :value="item.value" :label="item.name" v-for="item in meetingParticipants" :key="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="视频支持" prop="meetingVideo">
          <el-radio :label="true" v-model="meeting.meetingVideo">需要</el-radio>
          <el-radio :label="false" v-model="meeting.meetingVideo">不需要</el-radio>
        </el-form-item>
        <el-form-item label="主要行业应用" prop="industry">
          <el-select v-model="industry" placeholder="请选择分类" class="g-input-width-large">
            <el-option value="0" label="政府行业"></el-option>
            <el-option value="1" label="医疗行业"></el-option>
          </el-select>
          <el-checkbox-group v-model="meeting.industry" class="g-checkbox" style="margin-top: 10px">
            <el-checkbox label="市场监管" border class="label"></el-checkbox>
            <el-checkbox label="应急管理" border class="label"></el-checkbox>
            <el-checkbox label="自然资源" border class="label"></el-checkbox>
            <el-checkbox label="党政民生" border class="label"></el-checkbox>
            <el-checkbox label="空间大数据" border class="label"></el-checkbox>
            <el-checkbox label="人工智能" border class="label"></el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="收款账户" prop="receiptAccount">
          <el-input placeholder="请输入收款账户" v-model="meeting.receiptAccount" class="g-input-width-large g-input-prepend">
            <el-select v-model="wayRecipt" slot="prepend" placeholder="收款方式">
              <el-option label="微信" value="0"></el-option>
              <el-option label="支付宝" value="1"></el-option>
            </el-select>
          </el-input>
        </el-form-item>
        <el-form-item label="紧急程度" prop="urgencyLevel">
          <el-radio v-model="meeting.urgencyLevel" label="0">
            <el-tag size="small" type="danger">紧急</el-tag>
          </el-radio>
          <el-radio v-model="meeting.urgencyLevel" label="1">
            <el-tag size="small" type="primary">急</el-tag>
          </el-radio>
          <el-radio v-model="meeting.urgencyLevel" label="2">
            <el-tag size="small" type="success">一般</el-tag>
          </el-radio>
        </el-form-item>
        <el-form-item label="地区" prop="region">
          <el-cascader v-model="meeting.region" :options="regionOptions" class="g-input-width-large"></el-cascader>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
import { getScrollingCon } from '@/util/common'
import { meetingSites, regionOptions, meetingParticipants } from '@/data/data'
export default {
  data() {
    return {
      meeting: {
        meetingName: '',
        meetingContent: '',
        meetingDuration: {
          meetingStart: '',
          meetingEnd: '',
        },
        meetingSite: '',
        meetingParticipant: [],
        meetingVideo: true,
        industry: [],
        receiptAccount: '',
        accountType: '',
        urgencyLevel: '0',
        region: null
      },
      industry: null,
      wayRecipt: '1',
      regionOptions,
      meetingSites,
      meetingParticipants,
      formRules: {
        meetingName: [
          { required: true, message: '请输入会议名称', trigger: 'blur' }
        ],
        meetingContent: [
          { required: true, message: '请输入会议内容', trigger: 'blur' }
        ],
        meetingDuration: [
          { 
            validator: (rule, value, cb) => value.meetingStart == '' || value.meetingEnd == ''?cb(new Error()):cb(), 
            message: '请输入起止时间', 
            trigger: 'blur',
          }
        ],
        region: [
          { required: true, message: '请选择地区', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    getScrollingCon,
    handleSubmit() {
      this.$refs.form.validate((isValid) => {
        if (isValid) {
          this.$message.success('提交成功')
        } else {
          this.$message.warning('请检查表单项')
          return false
        }
      })
    },
  },
}
</script>